<template>
  <div class="l-echart-scrollrank" :style="styleSizeName" @click="handleClick">
    <div :class="`animated ${animateValue}`" style="width: 100%; height: 100%">
      <component
        :key="key"
        :is="option.is"
        :style="styleImgName"
        :config="dataHandle.config"
      ></component>
    </div>
  </div>
</template>

<script>
import init from "../mixins/common";
export default {
  mixins: [init],
  data() {
    return {
      isFresh: false,
      key: false,
      dataHandle: {},
    };
  },
  created() {
    if (!this.option.opacity) this.$set(this.option, "opacity", 100);
  },
  computed: {
    styleImgName() {
      return Object.assign({
        width: "100%",
        height: "100%",
        transitionProperty: "all",
        opacity: this.option.opacity / 100,
        transform: `rotateX(${this.option.rotateX}deg) rotateY(${this.option.rotateY}deg) rotateZ(${this.option.rotateZ}deg) scale(${this.option.scale})`,
      });
    },
    animateValue: {
      get() {
        return this.option.animateValue;
      },
      set() {},
    },
  },
  watch: {
    fresh: {
      handler() {
        this.isFresh = true;
        this.updateChart();
      },
    },
  },
  methods: {
    updateChart() {
      const optionData = this.$deepClone(this.dataChart);
      let data = [];
      if (
        this.dataType === 2 &&
        this.labelKey &&
        this.valueKey &&
        this.isFresh
      ) {
        if (optionData.length > 0) {
          optionData.map((t) => {
            data.push({
              name: t[this.labelKey],
              value: t[this.valueKey],
            });
          });
        }
      } else {
        data = optionData;
      }
      this.dataHandle = this.echartFormatter && this.echartFormatter(data);
      this.isFresh = false;
    },
    handleClick() {
      this.clickFormatter &&
        this.clickFormatter(
          {
            data: this.dataChart,
          },
          this.getItemRefs()
        );
    },
  },
};
</script>